Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how to use filters to format data on the screen and how to avoid errors in the console.
Create Filters to Reuse Formatting
Formatting data on the screen can be annoying. We’ve to deal with many formats for numbers, percentages, dates, currencies, etc. It gets complicated fast.
This is why we want to make a reusable piece of code so that we only deal with these problems once and forget about it.
Fortunately, Vue has filters, which we can define to format data our way. It makes templates cleaner by eliminating formatting code from templates and components.
We can define a Vue filter and use it as follows:
index.js :
Vue.filter("localeDateString", date => {
return date.toLocaleDateString();
});
new Vue({
el: "#app",
data: {
date: new Date()
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{date | localeDateString}}
</div>
<script src="index.js"></script>
</body>
</html>
In the code above, we used the Vue.filter method to define a filter. The first argument is the name of the filter. The second is a function that takes a value that we want to format and we return a formatted string.
Then we set the date value to new Date() and applied the localeDateString to it with the pipe operator.
We can reuse this anywhere since it’s a global filter declaration. We can also make a local filter declaration with the filters property in the component options object as follows:
index.js :
new Vue({
el: "#app",
data: {
date: new Date()
},
filters: {
localeDateString(date) {
return date.toLocaleDateString();
}
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{date | localeDateString}}
</div>
<script src="index.js"></script>
</body>
</html>
The only difference is that we moved our filter function into the filters object. We can only use a local filter within the component.
We can also pass in arguments to filters as follows:
index.js :
Vue.filter("readMore", (text, moreText) => {
return `${text.toUpperCase()} ${moreText}`;
});
new Vue({
el: "#app",
data: {
message: "foo"
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message | readMore('bar')}}
</div>
<script src="index.js"></script>
</body>
</html>
We just pass in arguments like any other function, except that the argument ends up as the value of the 2nd parameter and beyond.
Also, we can chain the filters by adding them one by one from left to right in the order that we want to apply them.
Avoid Annoying Errors and Warnings
We should know the causes of errors and warning that shows in the developer console so that we can eliminate them without taking too long.
For instance, the ‘Property or method “prop” is not defined on the instance but referenced during render…” error shows up when we reference a data in the template but we didn’t initialize it in the object that we return with data .
It can also happen if we have a prop or variable but we misspelled the prop or variable name.
In this case, we should check for typos. For instance, we’ll get the error if we have something like:
index.js :
new Vue({
el: "#app",
data: {
message: "foo"
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{messag}}
</div>
<script src="index.js"></script>
</body>
</html>
In the code above, we have {{messag}} in the template, but we have message: “foo” in the component code.
So we should have sure that they’re the same and the error will be gone.
We have also defined it in the property on a different component than the template is referencing. This is also a common mistake that we make.
Conclusion
Creating and using filters make formatting data on templates easy. We can define them globally or locally. We can compose them by chaining them and we can also pass arguments to them to change the options.
The most common error message that comes from Vue is the ‘Property or method “prop” is not defined on the instance but referenced during render…” error.
This means that we’re referencing items in templates that haven’t been defined as property in the object we returned with data .
